<template>
  <div class="full-calendar-body">

    <div class="weeks">
      <strong class="week" v-for="(week,ii) in weekNames" :key="ii">
        <el-checkbox v-model="ischeched" :label="week" @change="weelFun(week)" />
      </strong>
    </div>
    <div class="dates" ref="dates">
      <div class="dates-bg">
        <div class="week-row" v-for="(week,ii) in currentDates" :key="ii">
          <div class="day-cell" v-for="(day, j) in week" :key="j" :class="{'today' : day.isToday,
              'not-cur-month' : !day.isCurDate}">
            <p class="day-number">{{day.monthDay}}</p>
          </div>
        </div>
      </div>
      <div class="dates-events">
        <div class="events-week" v-for="(week,index3) in currentDates1" :key="index3">
          <div class="events-day" v-for="(day,index2)  in week" :key="index2" track-by="$index"
            :class="{'today' : day.isToday, 'not-cur-month' : !day.isCurDate , 'toDisable': day.events.some(i => i.disable == 1) }"
            @click.stop="dayClick(day, $event,day.events)"
            :style="{ 'backgroud-color': day.isShow?'gray':'none' }"
            @mouseenter="onMouseOver(day.events.length !==0?day.events[0].productDate:'0')"
            @mouseleave="onMouseOut(day.events.length !==0?day.events[0].productDate:'0')">
            <el-row style="margin-bottom:10px">
              <el-col :offset="3" style="margin-top:5px">
                <el-checkbox @change="dayClick(day, $event,day.events)" v-model="day.checked"
                  v-show="day.events.length == 0 ? false : day.isCurDate && day.events.some(i => i.disable == 0)" />
              </el-col>
              <el-col :offset="3">
              </el-col>
            </el-row>
            <div>
              <div class="event-box" v-for="(event,index) in day.events"
                 v-show="event.cellIndex <= eventLimit " :key="index">
                <el-row>
                  <div class="event-item">
                    <el-col class="d-c" v-show="day.events.every(i => i.disable == 1)" :offset="6"
                      :span="20">
                      <span class="sp-an">{{day.events.every(i => i.disable == 1)?'禁用':''}}</span>
                    </el-col>
                    <el-col :offset="6" :span="20" class="whiteSpace">{{event.title}}</el-col>
                    <el-col :offset="6" :span="24">门市价：{{event.sellingPrice}}元</el-col>
                    <el-col :offset="6" :span="24">售价价格：{{event.preferentialPrice}}元</el-col>
                    <el-col :offset="6" :span="24">结算价格：{{event.settlementPrice}}元</el-col>
                    <el-col :offset="6" :span="24">商品库存：{{event.stockNumebr}}</el-col>
                    <el-col :offset="6" :span="24" v-if="routeType == 2">商品剩余库存：{{event.nowStockNumber}}</el-col>
                  </div>
                </el-row>
              </div>
            </div>
            <div class="btn-box" id="atable" style="display:none"
              v-for="(event,index) in day.events"
              v-show="event.cellIndex == eventLimit && desc_show == event.productDate && new Date(new Date().getTime() - 24*60*60*1000) < new Date(event.productDate)"
              :key="index">
              <div  v-if="routeType != 4">
                <span class="zin" @click.stop="open(event,day.events)"
                  v-show="day.events.some(i => i.disable == 0)">调整</span>
                <span class="zin"
                  @click.stop="bFun(day.events,event)">{{day.events.some(i => i.disable == 0) ?'禁用':'启用'}}</span>
              </div>
              <div v-else @click="open(event,day.events)">查看</div>
            </div>
          </div>
        </div>
      </div>
      <slot name="body-card">
      </slot>
    </div>
    <div class="aBox" v-show="IsVisible">
      <div class="ul-box">
        <span class="font1">商品名称</span>
        <span class="font2">门市价</span>
        <span class="font2">售价价格</span>
        <span class="font2">结算价格</span>
        <span class="font2">商品库存</span>
        <span class="font5" v-if="routeType == 2">商品剩余库存</span>
        <span class="font6">操作</span>
      </div>

      <div class="ul-box" v-for="(item,index) in inputVal" :key="index">
        <span class="font1">{{item.title}}</span>
        <span class="font2">
          <el-input v-model="item.sellingPrice" class="v-input"
            :disabled="item.disable == 0 ? false : true">{{item.sellingPrice}}</el-input>
        </span>
        <span class="font2">
          <el-input v-model="item.preferentialPrice" class="v-input"
            :disabled="item.disable == 0 ? false : true">{{item.preferentialPrice}}
          </el-input>
        </span>
        <span class="font2">
          <el-input v-model="item.settlementPrice" class="v-input"
            :disabled="item.disable == 0 ? false : true">{{item.settlementPrice}}
          </el-input>
        </span>
        <span class="font2">
          {{item.stockNumebr}}
        </span>
        <span class="font5" v-if="routeType == 2">
          <el-input v-model="item.nowStockNumber" class="v-input"
            :disabled="item.disable == 0 ? false : true">{{item.nowStockNumber}}</el-input>
        </span>
        <span class="font6" >
          <el-button :disabled="routeType == 4" @click="JYCLICK(index, item)">{{item.disable == 0?'禁用':'启用'}}</el-button>
        </span>
      </div>

      <el-row>
        <el-button type="info" @click="CFun()" plain>取消</el-button>
        <el-button v-if="routeType != 4" type="success" @click="SFun()" plain>提交</el-button>
      </el-row>

    </div>
    <div class="tbtn">
      <el-button class="betn" type="primary" @click="go">返回</el-button>
      <div class="tbtns"  v-if="routeType != 4">
        <el-button class="betn" v-show="this.newArr.length < 1" type="success" @click="ALF()">全选
        </el-button>
        <el-button class="betn" v-show="this.newArr.length > 0" type="success" @click="DALF()">取消选择
        </el-button>
        <el-button class="betn" type="warning" @click="opent()">调整</el-button>
        <el-button class="betn" type="danger" @click="Prohib">禁用</el-button>
      </div>
      
    </div>
  </div>
</template>
<script type="text/babel">
import dateFunc from "./dateFunc";
export default {
  props: {
    currentDate: {},
    events: {},
    weekNames: {
      type: Array,
      default: [],
    },
    monthNames: {},
    firstDay: {},
  },
  created() {
    this.events.forEach((item, index) => {
      item._id = item.id || index;
      item.end = item.end || item.start;
    });
    this.routeType = this.$route.params.type;
  },
  data() {
    return {
      weekMask: [1, 2, 3, 4, 5, 6, 7],
      currentDates1: [],
      isLismit: true,
      eventLimit: 1,
      selectDays: {},
      selectDay: {},
      gridData: [],
      IsVisible: false,
      input: "",
      input1: "",
      input2: "",
      desc_show: null,
      detaId: "",
      datestarr: [],
      getweeklist: [],
      ischeched: [],
      input: "",
      inputVal: [],
      newArr: [],
      routeType: 1
    };
  },
  computed: {
    currentDates() {
      this.ischeched = [];
      let dates = this.getCalendar();
      this.currentDates1 = dates;
      return dates;
    },
  },
  methods: {
    JYCLICK(ind, e) {
      e.disable = e.disable == 0 ? 1 : 0;
      let arr = [];
      this.newArr.forEach((i, ii, iii) => {
        i.forEach((k, kk, kkk) => {
          this.inputVal.forEach((j, jj, jjj) => {
            if (kk == jj && jj == ind) {
              k.sellingPrice = j.sellingPrice;
              k.preferentialPrice = j.preferentialPrice;
              k.settlementPrice = j.settlementPrice;
              k.nowStockNumber = j.nowStockNumber
              k.disable = j.disable = e.disable;
              arr.push(k);
            }
          });
        });
      });
      let saveModel = {
        delKeys: null,
        mainData: {},
        detailData: arr,
      };

      this.http
        .post("api/distriProducts/UpdateProPriceCal", saveModel)
        .then((res) => {});
    },
    go() {
      this.$router.go(-1);
    },
    weelFun(x) {
      if (this.ischeched.length > 1) {
        this.ischeched.splice(0, 1);
      }
      this.newArr = [];
      let weekDay = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
      let dates = this.getCalendar();
      for (var i = 0; i < dates.length; i++) {
        for (var j = 0; j < dates[i].length; j++) {
          if (dates[i][j].events.length !== 0 && dates[i][j].isCurDate) {
            let fdx = this.currentDates1[i][j].events[0];
            let myDate = new Date(Date.parse(fdx.productDate));
            if (
              weekDay[myDate.getDay()] == x &&
              this.currentDates1[i][j].checked == false &&
              this.currentDates1[i][j].events[0].disable == 0
            ) {
              this.currentDates1[i][j].checked = true;
              this.newArr.push(this.currentDates1[i][j].events);
            } else {
              this.currentDates1[i][j].checked = false;
            }
          }
        }
      }
    },
    ALF() {
      this.ischeched = [];
      let dates = this.getCalendar();
      for (var i = 0; i < dates.length; i++) {
        for (var j = 0; j < dates[i].length; j++) {
          if (dates[i][j].events.length !== 0 && dates[i][j].isCurDate) {
            for (var n = 0; n < this.currentDates1[i][j].events.length; n++) {
              if (this.currentDates1[i][j].events[n].disable == 0) {
                this.currentDates1[i][j].checked = true;
                this.newArr.push(this.currentDates1[i][j].events);
                break;
              } else {
                this.currentDates1[i][j].checked = false;
              }
            }
          }
          this.inputVal = this.inputVal.slice(
            0,
            this.currentDates1[i][j].events.length
          );
        }
      }
    },
    DALF() {
      this.ischeched = [];
      this.newArr = [];
      let dates = this.getCalendar();
      for (var i = 0; i < dates.length; i++) {
        for (var j = 0; j < dates[i].length; j++) {
          if (dates[i][j].events.length !== 0 && dates[i][j].isCurDate) {
            for (var n = 0; n < this.currentDates1[i][j].events.length; n++) {
              this.currentDates1[i][j].checked = false;
            }
          }
        }
      }
    },
    onMouseOver(index) {
      this.desc_show = index;
    },
    onMouseOut(index) {
      this.desc_show = null;
    },
    CFun() {
      this.IsVisible = false;
      this.currentDates1.forEach((i) => {
        i.forEach((j) => {
          j.checked = false;
        });
      });
      this.ischeched = [];
      this.newArr = [];
    },
    SFun() {
      let arr = [];
      this.newArr.forEach((i, ii, iii) => {
        i.forEach((k, kk, kkk) => {
          this.inputVal.forEach((j, jj, jjj) => {
            if (kk == jj) {
              k.sellingPrice = j.sellingPrice;
              k.preferentialPrice = j.preferentialPrice;
              k.settlementPrice = j.settlementPrice;
              k.nowStockNumber = j.nowStockNumber
              arr.push(k);
            }
          });
        });
      });

      let saveModel = {
        delKeys: null,
        mainData: {},
        detailData: arr,
      };
      this.postFun(saveModel);
      this.IsVisible = false;
    },
    Prohib() {
      let arrA = [];
      this.newArr.forEach((i) => {
        i.forEach((j) => {
          j.disable = 1;
          arrA.push(j);
        });
      });
      let saveModel = {
        delKeys: null,
        mainData: {},
        detailData: arrA,
      };
      this.postFun(saveModel);
    },
    postFun(data) {
      this.http
        .post("api/distriProducts/UpdateProPriceCal", data)
        .then((res) => {
          this.newArr = [];
          this.$addStorageEvent(1, "data", data.id);
        });
    },
    open(e, n) {
      this.IsVisible = true;
      this.inputVal = JSON.parse(JSON.stringify(n));
      if (this.newArr.length == 0) {
        this.newArr[0] = n;
      }
    },
    opent() {
      if (this.newArr.length != 0) {
        this.IsVisible = true;
        this.inputVal = JSON.parse(JSON.stringify(this.newArr[0]));
      } else {
        this.$message.error("请选择数据");
      }
    },

    bFun(e, x) {
      let saveModel;
      if (x.disable == 0) {
        let arrA = [];
        if (this.newArr.length != 0) {
          this.newArr.forEach((i, ii, iii) => {
            i.forEach((k, kk, kkk) => {
              arrA.push({
                disable: 1,
                id: k.id,
                sellingPrice: k.sellingPrice,
                preferentialPrice: k.preferentialPrice,
                settlementPrice: k.settlementPrice,
                nowStockNumber: k.nowStockNumber
              });
            });
          });
        } else {
          for (var i = 0; i < e.length; i++) {
            arrA.push({
              disable: 1,
              id: e[i].id,
              sellingPrice: e[i].sellingPrice,
              preferentialPrice: e[i].preferentialPrice,
              settlementPrice: e[i].settlementPrice,
              nowStockNumber: e[i].nowStockNumber,
            });
          }
        }

        saveModel = {
          delKeys: null,
          mainData: {},
          detailData: arrA,
        };
      } else {
        let arrA = [];
        for (var i = 0; i < e.length; i++) {
          arrA.push({
            disable: 0,
            id: e[i].id,
            sellingPrice: e[i].sellingPrice,
            preferentialPrice: e[i].preferentialPrice,
            settlementPrice: e[i].settlementPrice,
            nowStockNumber: e[i].nowStockNumber,
          });
        }
        saveModel = {
          disable: 0,
          delKeys: null,
          mainData: {},
          detailData: arrA,
        };
      }
      this.postFun(saveModel);
    },
    getCalendar() {
      let current = new Date(this.currentDate);
      let startDate = dateFunc.getStartDate(current);
      let curWeekDay = startDate.getDay();
      let diff = parseInt(this.firstDay) - curWeekDay;
      diff = diff > 0 ? diff - 7 : diff;
      let curDate = new Date(this.currentDate);
      let y = curDate.getFullYear();
      let m = curDate.getMonth() + 2;
      if (m > 12) {
        m = 1;
        y++;
      }
      let week_count = this.getWeeks(y, m, 0);
      startDate.setDate(startDate.getDate() + diff);

      let calendar = [];
      for (let perWeek = 0; perWeek < week_count; perWeek++) {
        let week = [];
        for (let perDay = 0; perDay < 7; perDay++) {
          week.push({
            isShow: true,
            checked: false,
            monthDay: startDate.getDate(),
            isCurMonth: this.slotEvents(startDate).length == 0 ? false : true,
            isToday: this.slotEvents(startDate).length == 0 ? false : true,
            isCurDate:
              this.slotEvents(startDate).length == 0
                ? false
                : new Date(new Date().getTime() - 24 * 60 * 60 * 1000) >
                  new Date(startDate)
                ? false
                : true,
            weekDay: perDay,
            date: new Date(startDate),
            events: this.slotEvents(startDate),
          });
          startDate.setDate(startDate.getDate() + 1);
        }
        calendar.push(week);
      }
      return calendar;
    },
    getWeeks(year, month, day) {
      var date = new Date(year, parseInt(month) - 1, day);
      var w = date.getDay();
      var d = date.getDate();
      return Math.ceil((d + 6 - w) / 7);
    },
    slotEvents(date) {
      let thisDayEvents = this.events.filter((day) => {
        let dt = new Date(day.productDate);
        let st = new Date(dt.getFullYear(), dt.getMonth(), dt.getDate());
        let ed = day.end ? new Date(day.end) : st;
        return date >= st && date <= ed;
      });
      thisDayEvents.sort((a, b) => {
        if (!a.cellIndex) return 1;
        if (!b.cellIndex) return -1;
        return a.cellIndex - b.cellIndex;
      });
      for (let i = 0; i < thisDayEvents.length; i++) {
        thisDayEvents[i].cellIndex = thisDayEvents[i].cellIndex || i + 1;
        thisDayEvents[i].isShow = true;
        if (thisDayEvents[i].cellIndex == i + 1 || i > 2) continue;
        thisDayEvents.splice(i, 0, {
          title: "holder",
          cellIndex: i + 1,
          start: dateFunc.format(date, "yyyy-MM-dd"),
          end: dateFunc.format(date, "yyyy-MM-dd"),
          isShow: false,
        });
      }
      return thisDayEvents;
    },
    dayClick(day, jsEvent, id) {
      if (!day.isCurDate) {
        return false;
      } else {
        if (this.IsVisible == true) {
          return false;
        } else {
          this.$emit("dayclick", day, jsEvent);
          this.$emit("mous", day, jsEvent);
          day.checked = !day.checked;
          let v = day.events.some((i) => i.disable == 0);
          if (v) {
            if (day.checked) {
              this.newArr.push(id);
            } else {
              let ix = this.newArr.indexOf(id);
              this.newArr.splice(ix, 1);
            }
          }
        }
      }
    },
  },
};
</script>
<style lang="scss">
.tbtns{
  display: inline-block;
}
.toDisable {
  background: rgba(255, 0, 0, 0.2);
}
.betn {
  z-index: 111111;
}
.el-checkbox__label {
  font-size: 14px !important;
  font-weight: bold !important;
}
.sp-an {
  position: absolute;
  left: 100px;
  font-size: 20px;
  top: 140px;
}
.zin {
  z-index: 999;
  padding: 4px 20px;
  border-radius: 5px;
  color: green;
  background: #ffffff;
}
.zin:hover {
  color: #ffffff;
  background: green;
}
.tbtn {
  position: absolute;
  top: 5px;
  z-index: 1111111111;
}
.v-input {
  width: 100% !important;
}
.aBox {
  position: absolute;
  max-height: 550px;
  width: 900px;
  overflow: auto;
  border: 2px solid #e0e0e0;
  top: 20px;
  background: #ffffff;
  left: 50%;
  margin-left: -400px;
  box-shadow: #c7e6fd;
  z-index: 2222222222;
  padding-bottom: 30px;
  h2 {
    margin: 5px;
  }
  div {
    width: 300px;
    margin: 10px auto;
    font-size: 16px;
  }
  .el-row {
    width: auto !important;
    position: relative;
    bottom: -28px;
    display: flex;
    justify-content: center;
  }
  input {
    display: inline-block;
    line-height: 30px;
  }
}
.ul-box {
  width: 95% !important;
  margin: 0 auto;
  border-bottom: 1px solid #ccc;
  text-align: center;
}
.font1 {
  width: 30%;
  display: inline-block;
  text-align: left;

  line-height: 30px;
}
.font2 {
  width: 11%;
  display: inline-block;
  text-align: left;
  line-height: 30px;
}

.font5 {
  width: 12%;
  display: inline-block;
  text-align: left;
  line-height: 30px;
}
.font6 {
  width: 5%;
  display: inline-block;
  text-align: left;
  line-height: 30px;
}
.d-c {
  font-size: 24px;
  font-weight: bold;
  color: rgba(255, 0, 0, 0.5);
  top: -20px;
  left: -4px;
  text-align: right;
  position: absolute;
  text-align: center;
  line-height: 200px;
  font-size: oblique;
  width: 160px !important;
  height: 160px;
  padding: 60px 25px;
}

.btn-box {
  width: 98%;
  position: absolute;
  text-align: center;
  font-size: 14px;
  line-height: 25px;
  margin-top: 5px;
  left: 1px;
  bottom: 1px;
  z-index: 99999;
  background: #ffffff;
  font-weight: bold;
}
.event-box {
  width: 95%;
  margin: 0 auto;
  height: 140px;
  overflow: hidden;
}
.el-col-offset-6 {
  text-align: left !important;
  margin-left: 0 !important;
  width: 100%;
  margin: 0 auto;
  line-height: 20px;
  font-weight: bold;
}
.full-calendar-body {
  margin-top: -1px;
  .weeks {
    display: flex;
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
    border-left: 1px solid #e0e0e0;
    height: 50px;
    .week {
      flex: 1;
      text-align: center;
      border-right: 1px solid #e0e0e0;
      font-size: 16px;
      line-height: 50px;
    }
  }
  .dates {
    position: relative;
    .week-row {
      // width: 100%;
      // position:absolute;
      border-left: 1px solid #e0e0e0;
      display: flex;
      .day-cell {
        flex: 1;
        min-height: 180px;
        padding: 4px;
        border-right: 1px solid #e0e0e0;
        border-bottom: 1px solid #e0e0e0;
        .day-number {
          text-align: right;
        }
        &.today {
          background-color: #fcf8e3;
        }
        &.not-cur-month {
          pointer-events: none;
          background-color: rgb(187, 182, 182);
          .day-number {
            color: rgba(0, 0, 0, 0.24);
          }
        }
      }
    }
    .dates-events {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      width: 100%;
      .events-week {
        display: flex;
        .events-day {
          cursor: pointer;
          flex: 1;
          min-height: 180px;
          overflow: hidden;
          text-overflow: ellipsis;
          position: relative;
          .day-number {
            text-align: right;
            padding: 4px 5px 4px 4px;
            opacity: 0;
          }
          &.not-cur-month {
            .day-number {
              color: rgba(0, 0, 0, 0.24);
            }
          }
          .event-box {
            .event-item {
              cursor: pointer;
              font-size: 12px;
              background-color: #c7e6fd;
              margin-bottom: 2px;
              color: rgba(0, 0, 0, 0.87);
              padding: 0 0 0 4px;
              //height: 18px;
              line-height: 18px;
              word-wrap: break-word;
              //white-space: nowrap;
              //overflow: hidden;
              text-overflow: ellipsis;
              &.is-start {
                margin-left: 4px;
                // border-top-left-radius:4px;
                // border-bottom-left-radius:4px;
              }
              &.is-end {
                margin-right: 4px;
                // border-top-right-radius:4px;
                // border-bottom-right-radius:4px;
              }
              &.is-opacity {
                opacity: 0;
              }
              .whiteSpace {
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
              }
            }
            .more-link {
              cursor: pointer;
              // text-align: right;
              padding-left: 8px;
              padding-right: 2px;
              color: rgba(0, 0, 0, 0.38);
              font-size: 14px;
            }
          }
        }
      }
    }
    .more-events {
      position: absolute;
      width: 150px;
      z-index: 2;
      border: 1px solid #eee;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
      .more-header {
        background-color: #eee;
        padding: 5px;
        display: flex;
        align-items: center;
        font-size: 14px;
        .title {
          flex: 1;
        }
        .close {
          margin-right: 2px;
          cursor: pointer;
          font-size: 16px;
        }
      }
      .more-body {
        height: 140px;
        overflow: hidden;
        .body-list {
          height: 120px;
          padding: 5px;
          overflow: auto;
          background-color: #fff;
          .body-item {
            cursor: pointer;
            font-size: 12px;
            background-color: #c7e6fd;
            margin-bottom: 2px;
            color: rgba(0, 0, 0, 0.87);
            padding: 0 0 0 4px;
            height: 18px;
            line-height: 18px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
    }
    .n {
      background-color: gray;
    }
  }
}
</style>
